<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const vdomo = {
            tag: 'div',
            attr: {
                id: 'app'
            },
            children: [
                '88',
                {
                    tag: 'p',
                    children: ['我是div的段落']
                },
                '9888'
            ]
        }
        function createRealdom(vdom) {
            
            if(typeof vdom === 'string') return document.createTextNode(vdom)
            const realDom = document.createElement(vdom.tag)
            for(let k in vdom.attr) {
                realDom.setAttribute(k, vdom.attr[k])
            }
            for(let i = 0; i < vdom.children.length; i++) {
                realDom.appendChild(createRealdom(vdom.children[i]))
            }
            return realDom
        }
        let vvvdom = createRealdom(vdomo)
        document.body.appendChild(vvvdom)
    </script>
</body>
</html>